<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>气候数据可视化系统-站点管理</title>
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>#}

    <link href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='bootstrap/bootstrap-icons-1.11.1/bootstrap-icons.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <style>
        :root {
            --primary-color: #1565C0;
            --secondary-color: #42A5F5;
            --accent-color: #E3F2FD;
            --text-color: #212121;
            --light-text: #757575;
            --light-blue: #E1F5FE;
            --dark-blue: #0D47A1;
            --cyan: #00BCD4;
            --teal: #009688;
            --indigo: #3F51B5;
            --cloud-icon: #81D4FA;
        }

        body {
            background-color: #F5F7FA;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2342a5f5' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            color: var(--text-color);
            padding: 2rem;
            min-height: 100vh;
        }

        .page-header {
            margin-bottom: 2.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 2rem;
            margin-bottom: 0;
            position: relative;
            padding-left: 2.2rem;
        }

        .page-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.8rem;
            height: 1.8rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231565C0' d='M19.36 10.27L12 2.91L4.64 10.27C3 11.91 3 14.57 4.64 16.21C6.28 17.85 8.94 17.85 10.58 16.21L12 14.79L13.42 16.21C15.06 17.85 17.72 17.85 19.36 16.21C21 14.57 21 11.91 19.36 10.27M6.05 14.79C5.38 14.12 5.38 13.05 6.05 12.38C6.72 11.71 7.79 11.71 8.46 12.38L9.88 13.8L8.46 15.22C7.79 15.89 6.72 15.89 6.05 14.79M17.95 14.79C17.28 15.46 16.21 15.46 15.54 14.79L14.12 13.37L15.54 11.95C16.21 11.28 17.28 11.28 17.95 11.95C18.62 12.62 18.62 13.69 17.95 14.79Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
        }

        .btn-add-data {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
            transition: all 0.3s ease;
        }

        .btn-add-data:hover {
            background-color: var(--dark-blue);
            border-color: var(--dark-blue);
            box-shadow: 0 4px 12px rgba(21, 101, 192, 0.4);
            transform: translateY(-2px);
        }

        .climate-card {
            transition: all 0.3s ease;
            border: none;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            cursor: pointer;
            position: relative;
            background: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .climate-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--cyan), var(--secondary-color));
        }

        .climate-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .climate-card:hover::before {
            background: linear-gradient(90deg, var(--teal), var(--primary-color));
        }

        .climate-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .climate-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0;
            font-size: 1.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80%;
            display: flex;
            align-items: center;
        }

        .climate-title i {
            margin-right: 0.5rem;
            color: var(--cloud-icon);
            font-size: 1.35rem;
        }

        .climate-icon {
            display: inline-block;
            width: 22px;
            height: 22px;
            margin-right: 8px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13Z' fill='%2381D4FA'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
        }

        .climate-info {
            display: flex;
            flex-wrap: wrap;
            color: var(--light-text);
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }

        .climate-info-item {
            margin-right: 1.5rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.85rem;
        }

        .climate-info-item.id {
            background-color: #E1F5FE;
            color: var(--primary-color);
        }

        .climate-info-item.time {
            background-color: #E0F7FA;
            color: #00838F;
        }

        .climate-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn-action {
            padding: 0.35rem 0.6rem;
            font-size: 0.875rem;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .btn-edit-data {
            color: #0288D1;
            border-color: rgba(2, 136, 209, 0.2);
            background-color: rgba(2, 136, 209, 0.05);
        }

        .btn-edit-data:hover {
            background-color: rgba(2, 136, 209, 0.15);
            border-color: rgba(2, 136, 209, 0.3);
            color: #01579B;
        }

        .btn-delete-data {
            color: #e53935;
            border-color: rgba(229, 57, 53, 0.2);
            background-color: rgba(229, 57, 53, 0.05);
        }

        .btn-delete-data:hover {
            background-color: rgba(229, 57, 53, 0.15);
            border-color: rgba(229, 57, 53, 0.3);
            color: #c62828;
        }

        .climate-card-footer {
            background-color: var(--light-blue);
            border-top: none;
            padding: 0.7rem 1.25rem;
            font-size: 0.85rem;
            color: var(--dark-blue);
            display: flex;
            align-items: center;
        }

        .climate-type-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-left: auto;
        }

        .climate-type-badge.temperature {
            background-color: #FFF3E0;
            color: #E65100;
        }

        .climate-type-badge.precipitation {
            background-color: #E1F5FE;
            color: #01579B;
        }

        .climate-type-badge.wind {
            background-color: #E0F2F1;
            color: #004D40;
        }

        .climate-data-preview {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-right: 8px;
        }

        .climate-data-preview i {
            font-size: 0.9rem;
        }

        .empty-state {
            text-align: center;
            padding: 4rem 1rem;
            color: var(--light-text);
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-top: 2rem;
        }

        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1.2rem;
            color: var(--secondary-color);
            opacity: 0.7;
            display: block;
        }

        .empty-state h4 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .empty-state p {
            color: var(--light-text);
            max-width: 300px;
            margin: 0 auto;
        }

        /* 模态窗口样式 */
        .modal-content {
            border-radius: 12px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }

        .modal-header {
            background: linear-gradient(135deg, #1565C0, #1976D2);
            color: white;
            padding: 1.2rem 1.5rem;
            border-bottom: none;
        }

        .modal-header .btn-close {
            color: white;
            box-shadow: none;
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }

        .modal-header .btn-close:hover {
            opacity: 1;
        }

        .modal-body {
            padding: 1.8rem;
        }

        .modal-footer {
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1rem 1.5rem;
        }

        .form-label {
            font-weight: 500;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .form-control, .form-select {
            padding: 0.6rem 0.8rem;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.25);
        }

        .data-preview {
            background-color: var(--light-blue);
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }

        .data-preview h6 {
            color: var(--primary-color);
            margin-bottom: 0.8rem;
            font-weight: 600;
        }

        .data-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .data-name {
            color: var(--dark-blue);
            font-weight: 500;
        }

        .data-value {
            color: var(--light-text);
        }

        /* 删除确认样式 */
        .delete-alert {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
            font-weight: 500;
            margin-bottom: 1rem;
            padding: 0.75rem 1.25rem;
            border-radius: 0.25rem;
        }

        .climate-data-preview {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1 1 40%;
            min-width: 110px;
            max-width: 160px;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        .climate-data-preview i {
            font-size: 0.9rem;
            color: var(--primary-color);
        }

        .climate-data-preview span strong {
            font-weight: 600;
            color: var(--dark-blue);
        }

        .climate-card-footer {
            background-color: var(--light-blue);
            border-top: none;
            padding: 0.7rem 1rem;
            font-size: 0.8rem;
            color: var(--dark-blue);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            column-gap: 8px; /* 只增加列间距 */
            row-gap: 5px; /* 保持较小的行间距 */
        }

        .climate-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
            background-color: #FFF3E0;
            color: #E65100;
        }

        .climate-type-badge i {
            font-size: 0.9rem;
        }

        .climate-type-badge strong {
            font-weight: 600;
        }

        .climate-data-preview .data-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
        }

        .climate-data-preview .data-label i {
            font-size: 0.9rem;
            color: var(--primary-color);
        }

        .climate-data-preview .data-value {
            text-align: right;
        }

        .climate-data-preview .data-value strong {
            font-weight: 600;
            color: var(--dark-blue);
        }

        @media (max-width: 450px) {
            .climate-data-preview {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid p-0">
        <!-- 页面标题和添加气候数据按钮 -->
        <div class="page-header">
            <h1 class="page-title">气候数据</h1>
            <button type="button" class="btn btn-primary btn-add-data" data-bs-toggle="modal" data-bs-target="#newDataModal">
                <i class="bi bi-plus-lg"></i> 添加站点气候数据
            </button>
        </div>

        <!-- 气候数据列表卡片 -->
        <div class="row" id="climateList">
            {% for site in sites %}
            <div class="col-12 col-md-6 col-xl-3 mb-3">
                <div class="card climate-card" data-station-id="1">
                    <div class="card-body">
                        <div class="climate-header">
                            <h5 class="climate-title" title="">
                                <i class="bi bi-cloud"></i>{{ site.sitename }}
                            </h5>
                            <div class="climate-actions">
                                <button class="btn btn-action btn-edit-data" title="编辑数据" onclick="window.location.href='{{ url_for('func.editsite', siteId=site.id) }}' ">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-action btn-delete-data" data-station-id="{{ site.id }}" data-station-name="{{ site.sitename }}" data-station-create="{{ site.create_time }}" title="删除站点">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div class="climate-info">
                            <div class="climate-info-item id">
                                <i class="bi bi-hash"></i>
                                <span>{{ site.id }}</span>
                            </div>
                            <div class="climate-info-item time">
                                <i class="bi bi-clock-history"></i>
                                <span>{{ site.create_time }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer climate-card-footer">
                        <div class="climate-data-preview">
                            <div class="data-label">
                                <i class="bi bi-thermometer-half"></i>
                                <span>年均温</span>
                            </div>
                            <div class="data-value">
                                {% set amt = (site.tmax1 + site.tmax2 + site.tmax3 + site.tmax4 + site.tmax5 + site.tmax6 + site.tmax7 + site.tmax8 + site.tmax9 + site.tmax10 + site.tmax11 + site.tmax12 + site.tmin1 + site.tmin2 + site.tmin3 + site.tmin4 + site.tmin5 + site.tmin6 + site.tmin7 + site.tmin8 + site.tmin9 + site.tmin10 + site.tmin11 + site.tmin12)/24 %}
                                <strong>{{ amt|round(2) }}&nbsp;℃</strong>
                            </div>
                        </div>
                        <div class="climate-data-preview">
                            <div class="data-label">
                                <i class="bi bi-cloud-rain"></i>
                                <span>年降水</span>
                            </div>
                            <div class="data-value">
                                {% set ap = site.precip1 + site.precip2 + site.precip3 + site.precip4 + site.precip5 + site.precip6 + site.precip7 + site.precip8 + site.precip9 + site.precip10 + site.precip11 + site.precip12 %}
                                <strong>{{ ap|round(0) }}&nbsp;mm</strong>
                            </div>
                        </div>
                        <div class="climate-data-preview">
                            <div class="data-label">
                                <i class="bi bi-calendar3"></i>
                                <span>雨日</span>
                            </div>
                            <div class="data-value">
                                {% set rd = site.raind1 + site.raind2 + site.raind3 + site.raind4 + site.raind5 + site.raind6 + site.raind7 + site.raind8 + site.raind9 + site.raind10 + site.raind11 + site.raind12 %}
                                <strong>{{ rd|round(0) }}&nbsp;days</strong>
                            </div>
                        </div>
                        <div class="climate-data-preview">
                            <div class="data-label">
                                <i class="bi bi-sun"></i>
                                <span>辐射</span>
                            </div>
                            <div class="data-value">
                                {% set ams = (site.ra1 + site.ra2 + site.ra3 + site.ra4 +
                                  site.ra5 + site.ra6 + site.ra7 + site.ra8 +
                                  site.ra9 + site.ra10 + site.ra11 + site.ra12) / 12 %}
                                <strong>{{ ams|round(2) }}&nbsp;MJ/m²</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}

            <!-- 空状态提示 -->
            {% if sites|length < 1 %}
            <div class="empty-state d-none" id="emptyState">
                <i class="bi bi-cloud-slash"></i>
                <h4>暂无气候站点数据</h4>
                <p>点击"添加气候站点"按钮添加一个气候监测站点</p>
            </div>
            {% endif %}
        </div>

        <!-- 添加气候站点模态窗口 -->
        <div class="modal fade" id="newDataModal" tabindex="-1" aria-labelledby="newDataModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="newDataModalLabel">添加气候站点</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info d-flex align-items-center mb-4">
                            <i class="bi bi-info-circle-fill me-2"></i>
                            <div>提示：输入站点名称后系统将创建默认参数模板，您可以在编辑页面中修改具体参数值</div>
                        </div>
                        <form id="newDataForm" action="{{ url_for('func.addsite') }}" method="post">
                            <div class="mb-3">
                                <label for="stationName" class="form-label">站点名称</label>
                                <input name="sitename" type="text" class="form-control" id="stationName" required placeholder="请输入站点名称">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary" id="saveNewStation">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 删除站点确认模态窗口 -->
        <div class="modal fade" id="deleteStationModal" tabindex="-1" aria-labelledby="deleteStationModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteStationModalLabel">删除气候站点</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="delete-alert">
                            <i class="bi bi-exclamation-triangle"></i> 警告：确定要删除此站点数据吗？此操作不可恢复
                        </div>
                        <form id="deleteSitesForm" action="{{ url_for('func.deletesite') }}" method="post">
                            <div class="mb-3">
                                <label for="sitesId" class="form-label">站点唯一标识码</label>
                                <input name="deleteSiteId" type="text" class="form-control" id="siteId" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="speciesName" class="form-label">站点名称</label>
                                <input name="deleteSiteName" type="text" class="form-control" id="deleteSiteName" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="speciesName" class="form-label">最近修改时间</label>
                                <input name="deleteSiteCreateTime" type="text" class="form-control" id="siteCreateTime" readonly>
                            </div>
                            <div class="modal-footer">
                                <!-- 取消按钮 -->
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <!-- 提交按钮 -->
                                <button type="submit" class="btn btn-danger">删除</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    // 当前要删除的站点ID
    let currentDeleteStationId = null;

    $(document).ready(function() {
        // 点击删除按钮事件
        $(document).on("click", ".btn-delete-data", function(e) {
            e.stopPropagation(); // 阻止事件冒泡，避免触发站点卡片点击事件
            const stationId = $(this).data("station-id");
            const stationName = $(this).data("station-name");
            const stationCreate = $(this).data("station-create");

            // 设置当前要删除的站点ID和名称
            currentDeleteStationId = stationId;
            $("#deleteStationName").text(stationName);

            // 打开删除确认模态窗口
            $("#deleteStationModal").modal("show");
            $("#siteId").val(stationId);
            $("#deleteSiteName").val(stationName);
            $("#siteCreateTime").val(stationCreate);
        });
    });

</script>
</body>
</html>